<template>
  <div class="app-cont">
        <alertTip v-if="showAlert" @closeTip="go()" :alertText="alertText"></alertTip>

    <!--这是 Header 区域 -->
    <!--<headers title="新建商铺"></headers>-->
    <div class="main">
      <div class="main-container">
        <div class="fenlei">
          <div class="procedure">
            <div class="tupian">
              <img src="../assets/images/shops/ico_dpxx_2@1x.png" alt="">
              <img src="../assets/images/shops/btn@shop.png" alt="">
              <img src="../assets/images/shops/ico_flxx_2@1x.png" alt="">
              <img src="../assets/images/shops/line@1x.png" alt="">
              <img src="../assets/images/shops/ico_wc_1@1x.png" alt="">
            </div>
            <div class="state">
              <div class="shop">设置店铺信息</div>
              <div class="fl">设置分类信息</div>
              <div class="finsh">完成</div>
            </div>
          </div>
          <div class="tishi">
            <div class="content">
              <p>- 温馨提示 -</p>
              <p>您的佣金由三部分组成:</p>
              <p>1、本店所销售的商品，我所获得的佣金(即本店销售佣金)</p>
              <p>2、下级分店所销售的商品，我所获得的佣金(一级分店佣金)</p>
              <p>3、下级分店发展的分店所销售的商品，我所获得的佣金(即二级分店佣金)</p>
            </div>
            <p>选择商品分类</p>
            <div class="checkboxFive">
              <div class="BJu"><label><input type="checkbox" v-model="isCheckedAll" @click="checkedAll"
                                             class="checkedbox"><span></span></label></div>
              全选{{isCheckedAll}}
            </div>
            <div class="line"></div>
          </div>
          <div class="cheklist">
            <div :class="{message:true , checked: item.ischecked}" v-for="(item , index) in dataList"
                 :key="item.id"
                 @click="handlecheck(item,index)">
              {{ item.msg }}
              {{ item.ischecked }}
              <p>{{ item.kindname }}</p>
              <img :src=item.img alt="">
              <!--{{item.img}}-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部的 Tabbar 区域 -->
    <div class="footer">
      <div class="tabbar">
        <a href="javascript:;" @click="setUp">
          下一步
        </a>
      </div>
    </div>
  </div>
</template>
<script>
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  /* eslint-disable indent,comma-dangle */
  import {relogin} from "../components/httpUtil/httpUtil";

  export default {
    name: 'Newshopslist',
    data () {
      return {
        curId: 0,
        dataList: [{id: 1, msg: 'aaa'},
          {id: 11, msg: '222'},
          {id: 12, msg: '333'},
          {id: 13, msg: '444'},
          {id: 14, msg: '555'},
          {id: 15, msg: '666'},
          {id: 16, msg: '777'}],
        checkedList: [],
        createStoreData: {},
        value: '',
        shopId: '',
        isCheckedAll: false,
        showAlert:false,
        alertText:null
        //checklist设置
      }
    },
    created () { // 生命周期
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
//      this.getlist()
      this.dataList.forEach(item => {
        this.$set(item, 'ischecked', false)
      })
//      this.createStoreData = this.$store.state.createStore
//      this.$store.state.createStore = {}
      JSON.parse(localStorage.getItem('shopsInfo'))
    },
    mounted () {
    },
    methods: {
      alertTip(msg){
        this.showAlert = true;
        this.alertText = msg;
      },
      go(){
        this.showAlert = false
        },
      shopname () {
      },
      username () {
      },
      phone () {
      },
//      getlist () {
//        const jsonValue = JSON.stringify({
//          'c': '10007',
//          'p': {
//            'userId': this.$route.params.userId || 10001,
//            'tokenId': token(),
//          }
//        })
//        this.$http.post('/api/EarnAlot/qqs.us', jsonValue).then((res) => {
//          if (res.data.p.isTrue) {
//            this.dataList = JSON.parse(res.data.p.fistClass)
//            this.dataList.forEach(item => {
//              this.$set(item, 'ischecked', false)
//            })
//          }
//        })
//      },
      handlecheck (item) {
        item.ischecked = !item.ischecked
        console.log(item)
        if (item.ischecked) {
          this.checkedList.push(item.id)
//          this.checkedList.sort((a, b) => a - b)
        } else {
          let index = this.checkedList.indexOf(item.id)
          console.log(index)
          this.checkedList.splice(index, 1)
        }
//        this.checkedList = [...new Set(this.checkedList)]
        console.log(this.checkedList)
        var bol = true;				//创建一个布尔类型的变量
        for (var l = 0; l < this.dataList.length; l++) {	//遍历非全选input框
          //用&&方法来控制变量的布尔类型，若非全选input框里有checked属性是false，则布尔变量就会是false
          bol = bol && this.dataList[l].ischecked;
          if (!bol) {				//若有一个布尔变量是false，则跳出循环
            break;
          }
        }
        this.isCheckedAll = bol;
      },
      checkedAll (item) {
        item.ischecked = !this.isCheckedAll
        console.log(item.ischecked)
        this.dataList.forEach(item => {
          item.ischecked = !this.isCheckedAll
          if (item.ischecked) {
            this.checkedList.push(item.id)
          } else {
            let index = this.checkedList.indexOf(item)
            this.checkedList.splice(index, 1)
            this.checkedList = []
          }
        })
        this.checkedList = [...new Set(this.checkedList)]
        console.log(this.checkedList)
      },
      setUp () {
        let mallTypes = this.checkedList
        localStorage.setItem('mallTypes', JSON.stringify(mallTypes))
        let shopsInfo = JSON.parse(localStorage.getItem('shopsInfo'))
        let jsonValue = JSON.stringify(
          {
            'c': '10017',
            'p': {
              'tokenId': token(),
              'userId': JSON.parse(window.localStorage.data).id,
              'mallTypes': this.mallTypes,
              'shopName': shopsInfo.shopName,
              'realName': shopsInfo.realName,
              'mobile': shopsInfo.mobile
            }
          }
        )
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          if (res.data.p.isTrue) {
            console.log(res)
            this.shopId = res.data.p.shopId
            localStorage.setItem('shopId', this.shopId)
            this.$router.push({name: 'Shops'})
          } else {
            this.alertTip(res.data.p.errorMsg);
                if (res.data.p.errorCode === 90) {
                  this.go = ()=> {
                    this.showAlert = false
                    let _this = this;
                    relogin(_this)
                  }
                }
          }
        })
      },
    },
    computed: {},
    watch: {},
    beforeMount () {
    }
  }
</script>
<style lang="scss" scoped>
  /*.checkedbox{*/
  /*width: 40px;*/
  /*height: 40px;*/
  /*border-radius: 50%;*/
  /*}*/
  .app-cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0px 0 94px;
    box-sizing: border-box;
    .header {
      position: fixed;
      top: 0;
      left: 0;
      /*flex: 1;*/
      width: 100%;
      height: 80px;
    }
    .main {
      flex: 1;
      position: relative;
      .main-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
      }
    }
    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      height: 98px;
      width: 100%;
    }
  }
  .app-cont {
    .tabbar {
      width: 100%;
      padding-top: 12px;
      position: fixed;
      /*flex: 1;*/
      box-sizing: border-box;
      height: 98px;
      background: url("../assets/images/shops/btn@shop.png") no-repeat;
      background-size: cover;
      border-top: 1px solid #f3f3f3;
      vertical-align: middle;
      line-height: 98px;
      > a {
        position: fixed;
        bottom: 0px;
        height: 98px;
        width: 100%;
        text-align: center;
        line-height: 98px;
        font-size: 28px;
        color: #ffffff;
        background: url('../assets/images/shop/btn@shop.png') no-repeat;
        background-size: 100%;
      }
    }
  }
  .fenlei {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    /*background-color: #f4f4f4;*/
    display: flex;
    flex-direction: column;
    ::-webkit-scrollbar {
      display: none;
    }
  }
  .fenlei {
    .tishi {
      /*max-height: 300px;*/
      user-select: none;
      width: 100%;
      /*height: 264px;*/
      /*background-color: #daa520;*/
      box-sizing: border-box;
      padding: 38px 30px 0 30px;
      .content {
        height: 300px;
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;
        overflow-y: auto;
        /*height: 286px;*/
        background-color: #f3f6fa;
        padding: 20px 5px 30px 28px;
        /*margin-bottom: 20px;*/
        > p {
          user-select: none;
          &:nth-child(1) {
            text-align: center;
            font-size: 20px;
            color: #3e3e46;
            font-weight: bold;
          }
          &:nth-child(2) {
            margin-top: 20px;
          }
          &:nth-child(n-3) {
            margin-top: 10px;
          }
          &:nth-child(n-4) {
            font-size: 20px;
            color: #8a8a8a;
          }
        }
      }
      > p {
        height: 40px;
        margin-top: 38px;
        font-size: 20px;
        color: #3e3e46;
        font-weight: 600;
      }
    }
  }
  input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    display: none
  }
  .BJu {
    box-sizing: border-box;
    padding: 5px;
    border: 5px solid lightsteelblue;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .line {
    width: 100%;
    height: 2px;
    background-color: #f5f5f5;
    margin-bottom: 20px;
  }
  label {
    width: 100px;
    height: 100px;
    display: inline-block;
    cursor: pointer;
    border-radius: 50%;
  }
  label input[type="checkbox"] + span {
    line-height: 50px;
    width: 30px;
    height: 30px;
    display: inline-block;
    border-radius: 50%;
    background-color: #fff;
    /*border: 5px solid #999;*/
    box-sizing: border-box;
    /*margin: 5px;*/
  }
  label input[type="checkbox"]:checked + span {
    background: lightsteelblue;
  }
</style>
<style lang="scss">
  a:hover, a:visited, a:link, a:active {
    text-decoration: none;
    outline: none;
  }
  .checkboxFive {
    font-size: 28px;
    line-height: 20px;
    vertical-align: middle;
    /*font-weight: bold;*/
  }
  .procedure {
    /*background-color: #f4f4f4;*/
    height: 226px;
    /*padding-top: 127px;*/
    width: 640px;
    margin: 0 auto;
    /*display: flex;*/
    .tupian {
      /*float: left;*/
      width: 100%;
      /*box-sizing: border-box;*/
      padding-top: 47px;
      height: 68px;
      /*vertical-align: middle;*/
      img:first-child {
        width: 64px;
        height: 64px;
        /*margin-top: 47px;*/
        margin-left: 50px;
        margin-right: 18px;
      }
      img:nth-child(2n) {
        width: 134px;
        height: 6px;
        /*margin-top: 5px;*/
        margin-right: 17px;
        padding-bottom: 30px;
      }
      img:nth-child(3) {
        width: 60px;
        height: 60px;
        /*margin-top: 51px;*/
        margin-right: 17px;
      }
      img:nth-child(5) {
        width: 60px;
        height: 60px;
        /*margin-top: 51px;*/
        /*margin-left: 9px;*/
      }
    }
    .state {
      padding-bottom: 64px;
      width: 100%;
      height: 26px;
      font-size: 24px;
      color: #3b3b43;
      margin-top: 28px;
      .shop {
        /*width: 152px;*/
        /*float: left;*/
        display: inline-block;
        margin-left: 20px;
      }
      .fl {
        /*width: 152px;*/
        /*float: left;*/
        display: inline-block;
        margin-left: 80px;
      }
      .finsh {
        width: 56px;
        /*float: left;*/
        display: inline-block;
        margin-left: 142px;
      }
    }
  }
  .fenlei {
    .cheklist {
      .message {
        float: left;
        width: 270px;
        height: 264px;
        background-color: #f3f6fa;
        text-align: center;
        /*border: 1px solid #000;*/
        margin-left: 30px;
        margin-bottom: 6px;
        box-sizing: border-box;
        padding-top: 20px;
        padding-left: 16px;
        padding-bottom: 38px;
        padding-right: 10px;
        &.checked {
          background: linear-gradient(#fc8461, #fe361a);
        }
        a {
          text-decoration: none;
        }
        > img {
          width: 200px;
          height: 200px;
        }
      }
    }
  }
</style>
